<template>
  <div class="container">
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" class="header-left" size="25" />
      填写服务订单
    </div>

    <statusBar item="0"></statusBar>
    <!-- 内容选择区域 -->
    <van-cell class="cell">
      <template #title>
        <van-image width="25" height="25" :src="createInfo.service.serviceImg"></van-image>
        <span class="server-name">{{createInfo.service.serviceName}}</span>
      </template>
      <template #default>
        <div class="service-text">服务内容</div>
      </template>
    </van-cell>


    <van-cell-group class="cell">
      <van-cell>
        <template #title>
          就诊医院
        </template>
        <template #default>
          <div @click="showHospital=true">{{form.hospital_name || '请选择就诊医院'}}
            <van-icon name="arrow" />
          </div>
        </template>
      </van-cell>

      <van-cell>
        <template #title>
          就诊时间
        </template>
        <template #default>
          <div @click="showTime=true">{{currentDate || '请选择就诊时间'}}
            <van-icon name="arrow" />
          </div>
        </template>
      </van-cell>

      <van-cell>
        <template #title>
          陪诊师
        </template>
        <template #default>
          <div @click="showCompanion=true">{{companionName || '请选择陪诊师'}}
            <van-icon name="arrow" />
          </div>
        </template>
      </van-cell>

      <van-cell>
        <template #title>
          接送地址
        </template>
        <template #default>
          <van-field class="text" input-align="right" v-model="form.receiveAddress" placeholder="请填写接送地址"></van-field>
        </template>
      </van-cell>

      <van-cell>
        <template #title>
          联系电话
        </template>
        <template #default>
          <van-field class="text" input-align="right" v-model="form.tel" placeholder="请填写联系电话"></van-field>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group title="服务需求" class="cell">
      <van-field class="text" style="height: 100px;" v-model="form.demand" placeholder="请简单描述您要就诊的科室.."></van-field>
    </van-cell-group>

    <van-button @click="submit" class="sumbit" type="primary" size="large">提交订单</van-button>

    <!-- 就诊医院选择 弹出层 -->
    <van-popup v-model:show="showHospital" position="bottom" :style="{ height: '30%' }">
      <van-picker :columns="showHosColumns" @cancel="showHospital = false" @confirm="showHosConfirm" />
    </van-popup>

    <!-- 选择就诊时间 -->
    <van-popup v-model:show="showTime" position="bottom" :style="{ height: '30%' }">
      <van-date-picker :min-date="minDate" title="选择日期" @confirm="showTimeConfirm" @cancel="showTime=false" />
    </van-popup>
    <!-- 陪诊师 -->
    <van-popup v-model:show="showCompanion" position="bottom" :style="{ height: '30%' }">
      <van-picker :columns="showComColumns" @cancel="showCompanion = false" @confirm="showComConfirm" />
    </van-popup>

    <!-- 支付二维码弹窗 -->
    <van-dialog :showConfirmButton="false" v-model:show="showCode">
      <van-icon name="cross" class="close" @click="closeCode"></van-icon>
      <div>微信支付</div>
      <van-image width="150" height="150" :src="codeImg"></van-image>
      <div>请使用本人微信扫描二维码</div>
    </van-dialog>
  </div>

</template>
<script setup>
  import statusBar from '../../components/statusBar.vue'
  import { h5Companion, createOrder } from '../../api/index.js'
  import { useRouter, useRoute } from 'vue-router'
  import { onMounted, reactive, ref, computed } from 'vue'
  import Qrcode from 'qrcode'
  const router = useRouter()

  const createInfo = reactive({
    companion: [],
    hospitals: [],
    service: []
  })
  // 支付弹框
  const showCode = ref(false)
  const codeImg = ref('') //支付二维码图片
  // form数据
  const form = reactive({})
  // 就诊医院 控制弹框的显示和隐藏
  const showHospital = ref(false)
  // 选择就诊时间
  const showTime = ref(false)
  const showCompanion = ref(false)
  const currentDate = ref();
  const minDate = ref(new Date())// 最小日期

  // 底部弹框数据处理  按照框架的规则处理
  const showHosColumns = computed(() => {
    return createInfo.hospitals.map(item => {
      return { text: item.name, value: item.id }
    })
  })
  // 选择医院  确认按钮
  const showHosConfirm = (item) => {
    // console.log(item);
    // 定义获取选择医院的名字和id
    form.hospital_id = item.selectedOptions[0].value
    form.hospital_name = item.selectedOptions[0].text
    // 关闭弹框
    showHospital.value = false
  }
  // 选择就诊时间
  const showTimeConfirm = (item) => {
    const dateStr = item.selectedValues.join('-')
    currentDate.value = dateStr
    form.starttime = new Date(dateStr).getTime()
    showTime.value = false
  }

  // 选择陪诊师
  const showComColumns = computed(() => {
    return createInfo.companion.map(item => {
      return { text: item.name, value: item.id }
    })
  })
  const companionName = ref()
  const showComConfirm = (item) => {
    form.companion_id = item.selectedOptions[0].value
    companionName.value = item.selectedOptions[0].text
    showCompanion.value = false
  }
  // 提交表单
  const submit = async () => {
    const params = [
      'hospital_id',
      'hospital_name',
      'demand',
      'companion_id',
      'receiveAddress',
      'tel',
      'starttime'
    ]
    for (let i of params) {
      if (!form[i]) {
        showNotify({ message: '请把每一项都填写' });
        return
      }
    }
    const { data: { data } } = await createOrder(form)
    Qrcode.toDataURL(data.wx_code).then((url) => {
      showCode.value = true
      codeImg.value = url
    })
  }

  // 关闭支付弹框
  const closeCode = () => {
    // 跳转到订单列表
    router.push('/order')
    showCode.value = false
  }

  // 点击返回上一步
  const goBack = () => {
    router.go(-1)
  }

  onMounted(async () => {
    const { data } = await h5Companion()
    Object.assign(createInfo, data.data)
    // console.log(createInfo);


  })


</script>
<style lang="less" scoped>
  .container {
    background-color: #f0f0f0;
    height: 100vh;
  }

  .header {
    padding: 10px 0;
    text-align: center;
    line-height: 30px;
    font-size: 15px;

    .header-left {
      float: left;
    }
  }

  .cell {
    width: 95%;
    margin: 5px auto;
    background-color: #fff;

    ::v-deep(.van-field__control) {
      color: var(--van-cell-value-color);
    }

    ::v-deep(.van-cell__title) {
      display: flex;
      align-items: center;
    }

    .server-name {
      margin-left: 10px;
    }
  }

  .service-text {
    background: url() no-repeat center center;
    background-size: 20px;
  }

  .sumbit {
    width: 100%;
    position: absolute;
    bottom: 0;
  }

  ::v-deep(.van-dialog__content) {
    text-align: center;
    padding: 20px;

    .close {
      position: absolute;
      left: 20px;
    }
  }
</style>